<template>
  <div class="shopping">
    <div class="shoppingone">
      <span>购物袋</span>
    </div>
    <div class="shoppingtwo">
      <div class="list" v-for="(item, index) in goodsList" :key="index">
        <div class="left"><img :src="item.pic" alt="" /></div>
        <div class="middle">
          <p style="font-size: 14px">{{ item.title }}</p>
          <div class="middle1">
            <span style="color: red; font-weight: 700">￥{{ item.price }}</span>
            <!-- <span style="font-size: 14px; color: gray">{{
              item.originprice
            }}</span> -->
          </div>
        </div>
        <div class="right">
           <van-icon name="delete-o" @click="remove(index)"/>
          <div class="inc" @click="getDec(item)">-</div>
          <input type="text" size="1" v-model="item.value" />
          <div class="dec" @click="getInc(item)">+</div>
        </div>
      </div>
    </div>
    <div class="shoppingthree">
      <div class="shoppingthree1">全选</div>
      <div class="shoppingthree2">
        <span class="price">总价:￥{{ getPrice }}</span>
        <span class="Desc">去结算（{{ getSum }}）</span>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../../components/dl/home/Footer.vue";
export default {
   components: {
    Footer,
  },
  data() {
    return {
      goodsList: [
        {
          id: 1,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/a024fd2e6e4bfbb7e73c0e4dc17595be_300x300.png",
          title: "兰蔻菁纯臻颜淡纹眼霜 20ml两件套 淡化干纹细纹",
          price: "1570.00",
          originprice: "￥1570",
          value: 1,
        },
        {
          id: 2,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/f5be1fa3302dbd8a2f5d92a4d6a685e3_300x300.png",
          title: "兰蔻第二代小黑瓶精华肌底液 100ml两件套 修护肌底",
          price: "1998.00",
          originprice: "￥1998",
          value: 1,
        },
        {
          id: 3,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/a024fd2e6e4bfbb7e73c0e4dc17595be_300x300.png",
          title: "兰蔻菁纯臻颜淡纹眼霜 20ml两件套 淡化干纹细纹",
          price: "1570.00",
          originprice: "￥1570",
          value: 1,
        },
        {
          id: 4,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/f5be1fa3302dbd8a2f5d92a4d6a685e3_300x300.png",
          title: "兰蔻第二代小黑瓶精华肌底液 100ml两件套 修护肌底",
          price: "1998.00",
          originprice: "￥1998",
          value: 1,
        },
        {
          id: 5,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/a024fd2e6e4bfbb7e73c0e4dc17595be_300x300.png",
          title: "兰蔻菁纯臻颜淡纹眼霜 20ml两件套 淡化干纹细纹",
          price: "1570.00",
          originprice: "￥1570",
          value: 1,
        },
        {
          id: 6,
          pic: "https://pic.cdfgsanya.com/assets/upload/product/f5be1fa3302dbd8a2f5d92a4d6a685e3_300x300.png",
          title: "兰蔻第二代小黑瓶精华肌底液 100ml两件套 修护肌底",
          price: "1998.00",
          originprice: "￥1998",
          value: 1,
        },
      ],
    };
  },
  methods: {
    getInc(item) {
      item.value >= 5 ? 5 : (item.value += 1);
    },
    getDec(item) {
      item.value <= 1 ? 1 : (item.value -= 1);
    },
    remove(index) {
      if(goodsList.id == index){
        // this.remove.goodsList[item]
        // this.goodsList.splice(index, 1)
      }
      // this.goodsList = [];
      // this.goodsList.splice(index, 1)
    },
  },
  computed: {
    getPrice() {
      return this.goodsList.reduce((sum, item) => {
        return (sum += item.value * item.price);
      }, 0);
    },
    getSum() {
      return this.goodsList.reduce((sum, item) => {
        return (sum += item.value);
      }, 0);
    },
  },
};
</script>

<style scoped>
.shopping{
  background-color: rgb(237, 231, 231);
  overflow:hidden;
}
.shoppingone {
  width: 100%;
  text-align: center;
  height: 50px;
  background-color: gainsboro;
  line-height: 50px;
  font-size: 20px;
  position: fixed;
  z-index: 999;
  /* margin-bottom: 70px; */
}
.shoppingtwo {
  flex: 1;
  overflow: auto;
  margin-top: 50px;
  margin-bottom: 70px;
}

.list {
  width: 350px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-bottom: 1px solid gray;
}

.list .left img {
  width: 100px;
  height: 100px;
  border: 1px solid gray;
}

.list .middle {
  width: 180px;
  height: 100%;
  /* background-color: pink; */
}

.list .right {
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list .right .inc,
.list .right .dec {
  text-align: center;
  font-size: 20px;
  /* margin-top: 40px; */
}

.list .right input {
  border: none;
  text-align: center;
  width: 40px;
  height: 20px;
  background-color: ghostwhite;
}
.shoppingthree {
  width: 100%;
  height: 50px;
  background-color: white;
}
.shoppingthree {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 50px;
}
/* .shoppingthree>span{
  display: block;
} */
.shoppingthree2>span:nth-child(2){
  width: 100px;
  height: 50px;
  background-color: red;
  display: inline-block;
  color: white;
  text-align: center;
  line-height: 50px;
}
</style>